<nav class="navbar">
    <!-- 左侧Logo和导航链接 -->
    <a href="{% url 'create:index' %}" class="nav-brand">故事汇</a>

    <ul class="nav-links">
        <li><a href="{% url 'create:index' %}" >故事大厅</a></li>
        <li><a href="{% url 'create:create' %}">创作新故事</a></li>
        <li><a href="{% url 'create:draft' %}">我的稿件</a></li>
    </ul>

    <!-- 右侧用户菜单 -->
    <div class="nav-user">
        <button class="user-dropdown-btn">
            <div class="user-avatar"><img src="{{ request.user.head_img }}"></div>
            <span>你好! {{ request.user }}</span>
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L6 6L11 1" stroke="#495057" stroke-width="2" stroke-linecap="round"
                      stroke-linejoin="round"/>
            </svg>
        </button>

        <div class="dropdown-menu">
            <a href="#" class="profile">
                <span>个人中心</span>
            </a>
            <a href="#" class="settings">
                <span>账号设置</span>
            </a>
            <a href="#" class="history">
                <span>浏览记录</span>
            </a>

            <div class="divider"></div>

            <a href="{% url 'user:logout' %}" class="logout">
                <span>退出登录</span>
            </a>
        </div>
    </div>
</nav>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }

    body {
        background-color: #f8f9fa;
        color: #333;
        padding: 0;
        margin: 0;
        min-height: 100vh;
    }

    /* 导航栏样式 */
    .navbar {
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        padding: 0 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    .nav-brand {
        font-size: 24px;
        font-weight: 700;
        color: #3a86ff;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .nav-brand::before {
        content: "📚";
        margin-right: 8px;
    }

    .nav-links {
        display: flex;
        list-style: none;
    }

    .nav-links li {
        margin: 0 5px;
    }

    .nav-links a {
        text-decoration: none;
        color: #495057;
        font-weight: 500;
        padding: 10px 15px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .nav-links a:hover {
        background-color: #f1f3f5;
        color: #3a86ff;
    }

    .nav-links a.active {
        background-color: #e7f1ff;
        color: #3a86ff;
    }

    .nav-user {
        position: relative;
    }

    .user-dropdown-btn {
        display: flex;
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px 15px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .user-dropdown-btn:hover {
        background-color: #f1f3f5;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        margin-right: 10px;
    }

    .user-dropdown-btn span {
        font-weight: 500;
        color: #495057;
        margin-right: 8px;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        background: #fff;
        width: 200px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        margin-top: 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .nav-user:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-menu a {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        text-decoration: none;
        color: #495057;
        transition: all 0.3s ease;
    }

    .dropdown-menu a::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .dropdown-menu a.profile::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23495057'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-6.627 0-12 5.373-12 12h24c0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E");
    }

    .dropdown-menu a.settings::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23495057'%3E%3Cpath d='M24 13.616v-3.232l-2.869-1.02c-.198-.687-.472-1.342-.812-1.955l1.308-2.751-2.285-2.285-2.751 1.307c-.613-.34-1.269-.615-1.955-.812l-1.021-2.869h-3.232l-1.021 2.869c-.686.197-1.342.472-1.955.812l-2.751-1.308-2.285 2.285 1.308 2.752c-.34.612-.615 1.268-.812 1.955l-2.869 1.02v3.232l2.869 1.02c.197.687.472 1.342.812 1.955l-1.308 2.751 2.285 2.285 2.751-1.308c.613.34 1.269.615 1.955.812l1.021 2.869h3.232l1.021-2.869c.687-.197 1.342-.472 1.955-.812l2.751 1.308 2.285-2.285-1.308-2.751c.34-.613.615-1.269.812-1.955l2.869-1.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z'/%3E%3C/svg%3E");
    }

    .dropdown-menu a.history::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23495057'%3E%3Cpath d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 14h-4v-6h2v4h2v2zm5-11.665l-1.621 1.621c-0.951-0.951-2.265-1.541-3.707-1.541-1.633 0-3.099 0.748-4.083 1.917h-2.294c1.247-2.668 3.933-4.5 7.011-4.5 1.812 0 3.465 0.719 4.694 1.894l1.621-1.621v5.23h-5.221z'/%3E%3C/svg%3E");
    }

    .dropdown-menu a.favorites::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23495057'%3E%3Cpath d='M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z'/%3E%3C/svg%3E");
    }

    .dropdown-menu a.logout::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23495057'%3E%3Cpath d='M14 12h-4v-2h4v-2l4 3-4 3v-2zm-1.455-8h-7.545v16h7.545c1.182 0 2.184-.501 2.921-1.344l.001-.001.001-.001c.736-.843 1.033-1.947 1.033-2.655v-8c0-.708-.297-1.812-1.033-2.655l-.001-.001-.001-.001c-.737-.843-1.739-1.344-2.921-1.344zm0 14v-12c.565 0 1.088.239 1.5.645.412.406.645.935.645 1.355v8c0 .42-.233.949-.645 1.355-.412.406-.935.645-1.5.645z'/%3E%3C/svg%3E");
    }

    .dropdown-menu a:hover {
        background-color: #f8f9fa;
        color: #3a86ff;
    }

    .dropdown-menu a:hover::before {
        filter: invert(44%) sepia(92%) saturate(2591%) hue-rotate(204deg) brightness(101%) contrast(101%);
    }

    .divider {
        height: 1px;
        background-color: #e9ecef;
        margin: 8px 0;
    }

    /* 内容区域 */
    .content {
        max-width: 1200px;
        margin: 90px auto 30px;
        padding: 20px;
    }

    .content-section {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 30px;
        margin-bottom: 30px;
    }

    .content h2 {
        color: #343a40;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e9ecef;
    }

    .content p {
        line-height: 1.6;
        color: #495057;
        margin-bottom: 15px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .navbar {
            padding: 0 15px;
        }

        .nav-links a {
            padding: 8px 12px;
            font-size: 14px;
        }

        .user-dropdown-btn span {
            display: none;
        }
    }
</style>